<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Contacts</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript">
			var xmlhttp,timeoutId=0;
			var names={"A":false,"B":false,"C":false,"D":false,"E":false,"F":false,"G":false,"H":false,"I":false,"J":false,"K":false,"L":false,"M":false,"N":false,"O":false,"P":false,"Q":false,"R":false,"S":false,"T":false,"U":false,"V":false,"W":false,"X":false,"Y":false,"Z":false};
			var links = [];

			if(window.XMLHttpRequest) {
				/* code for IE7+, Firefox, Chrome, Opera, Safari */
  				xmlhttp=new XMLHttpRequest();
  			} else {
				/* code for IE6, IE5 */
	  			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  			}
			xmlhttp.onreadystatechange=function() {	
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var container=document.getElementById("container"),cel,row,irow,table,itable,items,contact,x,y,contacts,value;
					
					contacts = xmlhttp.responseXML.getElementsByTagName("c");
					for(x=0;x < contacts.length;x++) {
						items = contacts[x].getElementsByTagName("i");
						contact = document.createElement("div");
						contact.innerHTML = "<table style='border:1px solid gray;' id='table" + x + "'></table>"
						container.appendChild(contact);
						table = document.getElementById('table'+x);
						/* contact name */
						for(var name="",y=0;y < items.length;y++) {
							if(items[y].getAttribute("ct") == "structuredname") {
								name=items[y].getAttribute("v");
								break;
							}
						}
						/* picture */
						for(value=null,y=0;y < items.length;y++) {
							if(items[y].getAttribute("ct") == "photo") {
								value=items[y].getAttribute("v");
								break;
							}
						}
						row = table.insertRow(-1);
						cel = row.insertCell(-1);
						cel.width = "100";
						cel.align = "center";
						var bookmark = "";
						if(name.length) {
							var idx = name.substr(0,1).toUpperCase();
			
							if(names[idx] == false) {
								names[idx] = true;
								bookmark = "<a name=\"" + idx + "\"></a>";
							}
						}
						if(!value) {
							cel.innerHTML = bookmark + "<img align='middle' src='/img/contacts.jpg' />";
						} else {
							cel.innerHTML = bookmark + "<img align='middle' src='/cimg/" + ((value) ? value : 0) + ".jpg'/>";
						}
						cel.style.borderRight="1px solid gray";
						cel.style.padding=0;
						cel = row.insertCell(-1);
						cel.width = "250";
						/* insert contact name */
						cel.innerHTML =  "<table id='itable" + x + "'></table>"
						itable = document.getElementById('itable'+x);
						irow = itable.insertRow(-1);
						cel = irow.insertCell(-1);
						var id = contacts[x].getAttribute("id");
						cel.innerHTML = "<div style='cursor:pointer' onclick='getContact(" + id + ")'>" + name + "</div>" ;
						/* organization */
						for(value="",y=0;y < items.length;y++) {
							if(items[y].getAttribute("ct") == "organization") {
								value=items[y].getAttribute("v");
								break;
							}
						}
						irow = itable.insertRow(-1);
						cel = irow.insertCell(-1);
						cel.innerHTML = "<i>" + value + "</i>";
						/* other information */
						for(value="",y=0;y < items.length;y++) {
							if(items[y].getAttribute("ct") == "phone") {
								value+= "<div>" + items[y].getAttribute("t") + ": " + items[y].getAttribute("v") + "</div>";
							} else if(items[y].getAttribute("ct") == "email") {
								value+= "<div>" + items[y].getAttribute("v") + "</div>";
							}
						}
						cel = row.insertCell(-1);
						cel.width = "250";
						cel.innerHTML=value;
						value = "";
						for(var idx in names) {
							if(names[idx]) {
								value+="<a href=\"#" + idx + "\">" + idx + "</a> ";
							}
						}
    				}
					if(value.length) {
						document.getElementById("index").innerHTML=value;
					}
  				}
			}
			xmlhttp.open("GET","/contacts/xml",true);
			xmlhttp.send();
			
			function getContact(id,photoid)
			{
				xmlhttp.onreadystatechange=function() {	
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						document.getElementById("contactInfo").style.display="";
						var contact = xmlhttp.responseXML.getElementsByTagName("c")[0];
						var items = contact.getElementsByTagName("i");
						
						/* contact name */
						for(value="",y=0;y < items.length;y++) {
							if(items[y].getAttribute("ct") == "structuredname") {
								value+=items[y].getAttribute("v") + "<br/>";
								break;
							}
						}
						for(y=0;y < items.length;y++) {
							if(items[y].getAttribute("ct") == "organization") {
								value+=items[y].getAttribute("v") + "<br/>";
								break;
							}
						}
						value+="<br/>";
						for(y=0;y < items.length;y++) {
							if(items[y].getAttribute("ct") == "phone") {
								value+=items[y].getAttribute("v") + " (" + items[y].getAttribute("t") + ")<br/>";
							}
						}
						document.getElementById("childInfo").innerHTML = value;
						timeoutId=setTimeout("timeoutId=0;document.getElementById('contactInfo').style.display='none';",5000);
					}
				}
				if(timeoutId) cancelTimeout(timeoutId);
				xmlhttp.open("GET","/contact/" + id + "/" + photoid,true);
				xmlhttp.send();
			}
			
		</script>
	</head>
<body bgcolor="lemonChiffon">

<div id="index"     style="text-align:center;position:absolute;left:20px;top:20px;font-family:courier new;font-size:13px;width:605px;height:30px;"></div>
<div id="container" style="padding:5px;position:absolute;left:20px;top:60px;font-family:courier new;font-size:11px;width:605px;height:550px;overflow:auto;">
</div>

<div id="contactInfo" style="display: none;">
	<div style="background-color:black;opacity:.9; width: 300px;height: 200px;position:absolute;left:400px;top:200px;"></div>
	<div id="childInfo" style="color:white; text-align:left; position:absolute; width: 300px; height: 200px;position:absolute;left:400px;top:200px;"></div>
</div>

</body>
</html>
